視覺回溯測試

做視覺回溯測試的目的是要檢查每次修改元件UI的變化，當專案越來越大時，或是接近上線時期，修改元件的部分，有時會影響到整個專案。人工去檢視一定會有疏忽，所以需要工具來幫忙做測試。

使用 Chromatic工具 做自動的視覺回溯測試

Chromatic 是由 Storybook 的開發者製作的外掛，它非常有助於視覺回溯測試的工作流程，讓我們來試用看看。

註冊及設定Chromatic連動專案

• 請至 https://www.chromatic.com/ 按下 Sign in

• 選擇你的 Repo 放置的地方 (我選擇放置 GitHub)

• GitHub 授權登入後，看到以下畫面，可以用來加入要做視覺測試的專案

啟動及安裝 Chromatic

• 選擇完成後，會出現說明頁面 - 如何在專案啟動Chromatic

• 首先是安裝 Chromatic

$ npm install --save-dev chromatic

• 再來是啟動 Chromatic，Token 在 說明頁面 會自動出現

$ npx chromatic --project-token=qum36s9t5v

• 啟動 Chromatic 完成，可以去 Chromatic 頁面檢查

• 會發現我們專案的元件、Story都被完整的呈現在 Chromatic 上

Catch a UI change

修改 Taskbox 專案，通過調整背景 來了解 Chromatic 做為 視覺回溯測試工具的工作流程吧！

修改專案並提交Pull Request

• 新增一個 branch

$ git checkout -b change-task-background

• 修改 Task.vue 的程式碼，為它的任務標題欄加上紅色背景色

<!--src/components/Task.vue-->
...
<div class="title">
  <input
    type="text"
    :readonly="true"
    :value="this.task.title"
    placeholder="Input title"
    :style="{'background': 'red'}"
  />
</div>
...

• 接下來把變更結果，推到 GitHub 的 遠端追蹤分支上

$ git add .
$ git commit -m "change task background to red"
$ git push -u origin change-task-background

• 去 GitHub 提交一個 Pull Request，要求把變更結果 Merge 到主線上

UI Testing

• 做 Review 的成員 把專案程式 Fetch 下來，執行Chromatic 測試

$ npx chromatic --project-token=<project-token>

• 觀察 Pull Request 的頁面，發現 UI 正在等待被測試

• 執行結果，發現有五個變更的地方，可以到 Chromatic 頁面 Review Change，頁面會提示有幾個元件，且影響到多少個Story的變更

發現到只是改了一個元件就有很多變化，意味著一個小小的調整也會滾雪球造成更多的問題，這種情況正是開發人員除了其他測試方法之外,還需要做視覺回溯測試的原因。

檢視更改

• 按下 Chromatic 頁面的 Review Changes 按鈕，我們可以一個一個的檢查所有變更，如果確定要變更就按下 Accept 按鈕

• 當所有變更都檢視及Accept，Pull Request 頁面也會標示成通過 UI Test

• 當完成稽核後，我們已準備好自信地合併 UI 更改，我們會知道更新不會意外地引入錯誤。接下來就按下 Merge Pull Request，把變更核准到 Mater Branch！

小結

使用 Chromatic 做視覺回溯測試，整個工作流程如下所示

開發 -> 提交 -> 視覺回溯測試(比對變更) -> 接受 -> Merge

Reference

Test UI components：Vue、Angular

令人愉快的 Storybook 工作流程

Why Chroma’s getting behind Storybook